<!--
 * @Author: your name
 * @Date: 2022-02-21 14:21:50
 * @LastEditTime: 2022-02-21 14:59:45
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \react-1910b\xuni.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <div class="box">
            <span>hello</span>
        </div> -->
    </div>
    <script>
    var app1 = {
        type:"div",
        props:{
            class:"box",
            children:[
                {
                    type:"span",
                    props:{
                        children:["hellow"]
                    }
                  
                }
            ]
        }
    }
    function render (jsx,root) {
        
        let createElement = (jsx,parent)=>{
            let cur = null;
            console.log(jsx,parent)
            let {type,props} = jsx
            console.log(type,props)
            if (typeof(jsx)=="string") {
                cur = document.createTextNode(jsx)
                parent.append(cur)
            } else {
                cur = document.createElement(type)
                parent.append(cur)
                console.log(Object.keys(props))
                Object.keys(props).forEach((item,index)=>{
                    if (item == "class") {
                        cur.setAttribute('class',props[item])
                    } else if (item == 'children') {
                        if (Array.isArray(props[item])) {
                            props[item].map((val)=>{
                                createElement(val,cur)
                            })
                        }
                    }
                })
            }
           
        }
        createElement(jsx,root)
      
    }
    render(app1,app)

    </script>
</body>
</html>